<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>

    <style>
        /* 通配符选择器，选中所有标签 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            width: 600px;
            margin: 20px auto;
        }
        /* 设置h2,p居中 */
        h2 {
            text-align: center;
        }
        p {
            text-align: center;
            color: #666;
            /* 先竖直，再水平 */
            margin: 20px 0;
        }


        /* 设置弹性布局 */
        .row {
            /* 开启弹性布局 */
            display: flex;
            height: 40px;
            /* 水平方向居中 */
            justify-content: center;
        }
        /* 设置提示框的长度 */
        .row span {
            width: 80px;
        }

        /* 设置输入框的长度和高度 */
        .row input {
            width: 200px;
            height: 30px;
            text-indent: 1em;
        }

        .row button {
            color: white;
            background-color: orange;
            width: 120px;
            height: 35px;
            border: none;
            /* margin-left: 20px;
            margin-right: 20px; */
            margin: 20px;
        }
        /* 设置点击提交时变灰色 */
        button:active {
            background-color: #666;
        }
        
        /* 设置结果的div样式 */
        .result {
            text-align: center;
            margin: 20px;
            line-height: 40px;
        }

    </style>
</head>
<body>
    <div class="container">
        <h2>表白墙</h2>
        <p>输入后点击提交,信息会显示在表格下方</p>
        <div class="row">
            <span>谁:</span>
            <input type="text" class="from">
        </div>
        <div class="row">
            <span>对谁:</span>
            <input type="text" class="to">
        </div>
        <div class="row">
            <span>说:</span>
            <input type="text" class="message">
        </div>
        <div class="row">
            <button id="submit">提交</button>
            <button id="reset">重置</button>
        </div>
    </div>

    <script>
        // 一.实现表白墙展示
        let containerDiv = document.querySelector('.container');
        let inputs = document.querySelectorAll('input');
        let submit = document.querySelector('#submit');

        submit.onclick = function(){
            // 1.获取到三个input的值
            let from = inputs[0].value;
            let to = inputs[1].value;
            let mes = inputs[2].value;
            if(from == '' || to == '' || mes == ''){
                return;
            }
            // 2.构造新的展示div
            let resultDiv = document.createElement('div');
            resultDiv.className = 'row message result';
            resultDiv.innerHTML = from + ' 对: ' + to + ' 说: ' + mes;
            containerDiv.appendChild(resultDiv);
            // 3.清空表格中的内容
            for(let input of inputs){
                input.value = '';
            }
        }

        // 二.重置时把表格下的最后一条内容清除
        let reset = document.querySelector('#reset');
        reset.onclick = function(){
            // 删除最后一条消息，选中所有的row，找出最后一个row，删除
            let rowsDiv = document.querySelectorAll('.message');
            containerDiv.removeChild(rowsDiv[rowsDiv.length-1]);
        }
    </script>
</body>
</html>